<template>
	<div class="page">
		<div class="page-header">
			<div class="header">
				<div class="header-left" @click="back()">
					<i class="icon iconfont icon-left"></i>
				</div>
				<div class="header-center">
					<ul>
						<li>
							步骤 1
							<span></span>
						</li>
						<li>
							步骤 2
							<span></span>
						</li>
						<li class="active">
							步骤 3
							<span></span>
						</li>
					</ul>
				</div>
				<div class="header-right" @click="goHome()">
					<i class="icon iconfont icon-home"></i>
				</div>
			</div>
		</div>
		<div class="page-content">
			<section class="section-3">
				<div class="finish">
					<div class="finish-tip">
						<i class="icon iconfont icon-wancheng"></i>
						<p>完成</p>
					</div>
				</div>
				<div class="goods">
					<div class="goods-left">
						<img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt="">
					</div>
					<div class="goods-right">
						<div class="goods-desc">60包抽纸家用实惠装整箱卫生纸巾面巾餐巾纸抽婴儿原木抽纸巾漫花</div>
						<div class="goods-price">
							<i>￥</i>
							<span>0</span>
							<p>原价:￥6.80</p>
						</div>
						<div class="goods-btn">审核中</div>
					</div>
				</div>
				<div class="list">
					<div class="titles">
						<i></i>
						<p>别人在抢</p>
					</div>
					<div class="list-content">
						<div class="list-content--item">
							<div class="item-img"><img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt=""></div>
							<div class="item-info">
								<div class="item-price">
									<p>￥<i>0</i></p><span>ddasd</span>
								</div>
								<div class="item-paynum">65784人已抢</div>
							</div>
							<div class="item-desc">斑布竹浆本色家用抽纸实惠装擦手餐巾软抽卫生纸巾100抽24包整箱</div>
						</div>
						<div class="list-content--item">
							<div class="item-img"><img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt=""></div>
							<div class="item-info">
								<div class="item-price">
									<p>￥<i>0</i></p><span>ddasd</span>
								</div>
								<div class="item-paynum">65784人已抢</div>
							</div>
							<div class="item-desc">斑布竹浆本色家用抽纸实惠装擦手餐巾软抽卫生纸巾100抽24包整箱</div>
						</div>
						<div class="list-content--item">
							<div class="item-img"><img src="http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg" alt=""></div>
							<div class="item-info">
								<div class="item-price">
									<p>￥<i>0</i></p><span>ddasd</span>
								</div>
								<div class="item-paynum">65784人已抢</div>
							</div>
							<div class="item-desc">斑布竹浆本色家用抽纸实惠装擦手餐巾软抽卫生纸巾100抽24包整箱</div>
						</div>
					</div>
				</div>

			</section>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	import {
		Icon,
		NavBar,
		Lazyload,
		Tab,
		Tabs
	} from 'vant';

	Vue.use(Tab);
	Vue.use(Tabs);
	Vue.use(Icon);
	Vue.use(NavBar);
	Vue.use(Lazyload);
	export default {
		components: {

		},
		data() {
			return {
				bannerList: [
					'http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg',
					'http://by98tel.cdndm5.com/86/2020/8/31/4384649ab8a743bd.jpg',
				],
				current: 0,
				step: 0,
			}
		},

		computed: {

		},
		created() {

		},
		mounted() {

		},

		methods: {
			selectTab(step) {
				this.step = step;
			},
			goHome() {
				this.$router.push('/');
			},
			back() {
				this.$router.back();
			}
		}
	};
</script>

<style lang="less" scoped>
	.page {
		background: #F9F9F9;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.page-header {
		.header {
			background: #EC554E;
			height: 45px;
			width: 375px;
			display: flex;
			align-items: center;

			.header-left {
				padding: 0 18px;
				width: 50px;
				height: 45px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				i {
					color: #FFFFFF;
					font-size: 20px;
				}
			}

			.header-center {
				height: 45px;
				width: 255px;
				display: flex;
				align-items: center;
				justify-content: center;

				ul {
					display: flex;

					li {
						margin: 0 5px;
						font-size: 18px;
						color: rgba(255, 255, 255, 0.5);
						position: relative;
						height: 45px;
						display: flex;
						justify-content: center;
						align-items: center;

						span {
							width: 34px;
							height: 3px;
							background: rgba(255, 255, 255, 0.5);
							;
							position: absolute;
							bottom: 0;
							left: calc(50% - 17px);
							display: none;
						}

						&.active {
							color: #FFFFFF;

							span {
								display: block;
							}
						}
					}
				}
			}

			.header-right {
				height: 45px;
				padding: 0 18px;
				width: 50px;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				i {
					color: #FFFFFF;
					font-size: 20px;
				}
			}
		}

		.title-tab {
			ul {
				display: flex;

				li {
					font-size: 18px;
					color: #FFFFFF;
					margin: 0 5px;
					position: relative;

					span {
						position: absolute;
						left: calc(50% - 17px);
						width: 34px;
						height: 3px;
						background: rgba(255, 255, 255, 0.5);
					}
				}
			}
		}
	}

	.titles {
		display: flex;
		align-items: center;
		height: 20px;

		i {
			width: 5px;
			height: 14px;
			background: #FF0000;
		}

		p {
			margin-left: 10px;
			font-size: 14px;
			line-height: 18px;
			color: #333333;

		}
	}

	.section-3 {
		.finish {
			width: 375px;
			background: #FFFFFF;
			height: 192px;
			;
			padding-top: 50px;
			display: flex;
			justify-content: center;

			i {

				font-size: 80px;
				font-weight: bold;
				color: #558B2F;

			}

			p {
				margin-top: 42px;
				font-size: 22px;
				font-weight: bold;
				color: #558B2F;
				text-align: center;

			}
		}

		.goods {
			margin-top: 10px;
			width: 355px;
			height: 90px;
			background: #FFFFFF;
			padding: 0 10px;
			;
			padding-top: 10px;
			display: flex;

			.goods-left {
				width: 80px;
				height: 80px;

				margin-left: 10px;

				img {
					width: 80px;
					height: 80px;
				}
			}

			.goods-right {
				margin-left: 10px;
				position: relative;

				.goods-desc {
					font-size: 12px;
					color: #666666;

				}

				.goods-price {
					margin-top: 5px;

					i {
						font-size: 12px;
						color: #FF0000;
					}

					span {
						font-size: 20px;
						color: #FF0000;
						margin-left: 9px;
					}

					p {
						display: inline-block;
						font-size: 11px;
						color: #EEEEEE;
						margin-left: 11px;
						text-decoration: line-through;
					}
				}

				.goods-btn {
					width: 64px;
					height: 25px;
					background: #FBC02D;
					border: 1px solid rgba(249, 249, 249, 0.5019607843137255);
					border-radius: 5px;
					position: absolute;
					bottom: 10px;
					right: 10px;
					font-size: 12px;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;

				}

			}
		}

		.list {
			background: #FFFFFF;
			padding: 0 15px;
			width: 345px;
			margin-top: 10px;

			.list-content {
				display: flex;
				flex-wrap: wrap;
				margin-top: 5px;
				justify-content: space-between;

				.list-content--item {
					width: 165px;
					margin-bottom: 5px;

					.item-img {
						width: 165px;
						height: 165px;

						img {
							width: 165px;
							height: 165px;
						}
					}

					.item-info {
						margin-top: 5px;
						display: flex;

						.item-price {
							width: 50%;
							display: flex;

							p {

								font-size: 12px;
								color: #FC0303;

								i {
									margin-left: 5px;
									font-size: 16px;
									font-weight: bold;
									color: #FC0303;
								}
							}

							span {
								display: flex;
								justify-content: flex-end;
								align-items: center;
								font-size: 11px;
								color: #EEEEEE;
								margin-left: 10px;
								text-decoration: line-through
							}

						}

						.item-paynum {ssss
							display: flex;
							justify-content: flex-end;
							align-items: center;
							width: 50%;
							font-size: 11px;
							color: #FC0303;
						}
					}

					.item-desc {
						margin-top: 5px;
						font-size: 11px;
						color: #333333;
						line-height: 14px;
					}
				}
			}
		}
	}
</style>
